<template>
	<div class="app-container">
		<div>
			<p class="dialogTitle title">当前地震事件:
				<span v-if="currentEvent">{{ currentEvent.eventName }}</span>
				<span v-else>请在地震事件管理中设置当前地震事件</span>
			</p>
		</div>
		<hr>
		<div>
			<p style="font-size: 18px;font-weight: bold;">确定房屋装修破坏损失比</p>
		</div>
		<el-row :gutter="10" class="mb8">
			<el-col :span="1.5">
				<el-button type="primary" @click="handleUpdate">修改</el-button>
			</el-col>
			<el-col :span="8">
				<div>（计算值默认中值，可以修改，修改值必须在对应的范围内）</div>
			</el-col>
			<el-col :span="4">
				<div>房屋装修破坏损失比</div>
			</el-col>
			<el-col :span="4">
				<div>用百分比（%）表示</div>
			</el-col>
		</el-row>
		<el-form ref="formRef" :model="form" :rules="rules" label-width="0px">
			<table align="center" style="width: 100%;border-collapse: collapse;">
				<tr style="background: #D9D9D9;height: 35px;">
					<td align="center" :rowspan="2" :colspan="2">房屋类型</td>
					<!--<td align="center" :rowspan="2" style="width: 200px;">范围</td>-->
					<td align="center" :colspan="5">破坏等级</td>
				</tr>
				<tr style="background: #D9D9D9;height: 35px;">
					<td align="center" style="width: 200px;">基本完好</td>
					<td align="center" style="width: 200px;">轻微破坏</td>
					<td align="center" style="width: 200px;">中等破坏</td>
					<td align="center" style="width: 200px;">严重破坏</td>
					<td align="center" style="width: 200px;">毁坏</td>
				</tr>
				<tr>
					<td align="center" :rowspan="3">钢筋混凝土房屋</td>
					<td align="center" style="height: 35px;">范围</td>
					<td align="center">2~10</td>
					<td align="center">11~25</td>
					<td align="center">26~60</td>
					<td align="center">61~100</td>
					<td align="center">91~100</td>
				</tr>
				<tr>
					<td align="center" style="height: 35px;">中值</td>
					<td align="center">6</td>
					<td align="center">18</td>
					<td align="center">43</td>
					<td align="center">81</td>
					<td align="center">96</td>
				</tr>
				<tr>
					<td align="center" style="height: 35px;">计算值</td>
					<td align="center">
						<el-form-item prop="lossRatio1">
							<el-input v-model="form.lossRatio1" />
						</el-form-item>
					</td>
					<td align="center">
						<el-form-item prop="lossRatio2">
							<el-input v-model="form.lossRatio2" />
						</el-form-item>
					</td>
					<td align="center">
						<el-form-item prop="lossRatio3">
							<el-input v-model="form.lossRatio3" />
						</el-form-item>
					</td>
					<td align="center">
						<el-form-item prop="lossRatio4">
							<el-input v-model="form.lossRatio4" />
						</el-form-item>
					</td>
					<td align="center">
						<el-form-item prop="lossRatio5">
							<el-input v-model="form.lossRatio5" />
						</el-form-item>
					</td>
				</tr>
				<tr>
					<td align="center" :rowspan="3">砌体房屋</td>
					<td align="center" style="height: 35px;">范围</td>
					<td align="center">0~5</td>
					<td align="center">6~19</td>
					<td align="center">20~47</td>
					<td align="center">48~100</td>
					<td align="center">86~100</td>
				</tr>
				<tr>
					<td align="center" style="height: 35px;">中值</td>
					<td align="center">3</td>
					<td align="center">11</td>
					<td align="center">31</td>
					<td align="center">73</td>
					<td align="center">91</td>
				</tr>
				<tr>
					<td align="center" style="height: 35px;">计算值</td>
					<td align="center">
						<el-form-item prop="lossRatio6">
							<el-input v-model="form.lossRatio6" />
						</el-form-item>
					</td>
					<td align="center">
						<el-form-item prop="lossRatio7">
							<el-input v-model="form.lossRatio7" />
						</el-form-item>
					</td>
					<td align="center">
						<el-form-item prop="lossRatio8">
							<el-input v-model="form.lossRatio8" />
						</el-form-item>
					</td>
					<td align="center">
						<el-form-item prop="lossRatio9">
							<el-input v-model="form.lossRatio9" />
						</el-form-item>
					</td>
					<td align="center">
						<el-form-item prop="lossRatio10">
							<el-input v-model="form.lossRatio10" />
						</el-form-item>
					</td>
				</tr>
			</table>
		</el-form>
	</div>
</template>

<script setup name="decorationDamageLossRatio">
import useEventStore from "@/store/modules/event";
import { getAllList, getHouseFinishDlRatioByXsemId, updateLoss, saveHouseFinishDlRatio } from "@/api/directLossAssess/decorationDamageLossRatio.js"
const { proxy } = getCurrentInstance();
const currentEvent = computed(() => useEventStore().currentEvent);

const validator2_10 = (rule, value, callback) => {
	value = String(value)
	if (isNaN(value) || !value) {
		return callback(new Error());
	}
	if (!(value <= 10 && value >= 2)) {
		callback(new Error());
	} else {
		callback();
	}
}
const validator11_25 = (rule, value, callback) => {
	value = String(value)
	if (isNaN(value) || !value) {
		return callback(new Error());
	}
	if (!(value <= 25 && value >= 11)) {
		callback(new Error());
	} else {
		callback();
	}
}
const validator26_60 = (rule, value, callback) => {
	value = String(value)
	if (isNaN(value) || !value) {
		return callback(new Error());
	}
	if (!(value <= 60 && value >= 26)) {
		callback(new Error());
	} else {
		callback();
	}
}
const validator61_100 = (rule, value, callback) => {
	value = String(value)
	if (isNaN(value) || !value) {
		return callback(new Error());
	}
	if (!(value <= 100 && value >= 61)) {
		callback(new Error());
	} else {
		callback();
	}
}
const validator91_100 = (rule, value, callback) => {
	value = String(value)
	if (isNaN(value) || !value) {
		return callback(new Error());
	}
	if (!(value <= 100 && value >= 91)) {
		callback(new Error());
	} else {
		callback();
	}
}
const validator0_5 = (rule, value, callback) => {
	value = String(value)
	if (isNaN(value) || !value) {
		return callback(new Error());
	}
	if (!(value <= 5 && value >= 0)) {
		callback(new Error());
	} else {
		callback();
	}
}

const validator6_19 = (rule, value, callback) => {
	value = String(value)
	if (isNaN(value) || !value) {
		return callback(new Error());
	}
	if (!(value <= 19 && value >= 6)) {
		callback(new Error());
	} else {
		callback();
	}
}
const validator20_47 = (rule, value, callback) => {
	value = String(value)
	if (isNaN(value) || !value) {
		return callback(new Error());
	}
	if (!(value <= 47 && value >= 20)) {
		callback(new Error());
	} else {
		callback();
	}
}
const validator48_100 = (rule, value, callback) => {
	value = String(value)
	if (isNaN(value) || !value) {
		return callback(new Error());
	}
	if (!(value <= 100 && value >= 48)) {
		callback(new Error());
	} else {
		callback();
	}
}
const validator86_100 = (rule, value, callback) => {
	value = String(value)
	if (isNaN(value) || !value) {
		return callback(new Error());
	}
	if (!(value <= 100 && value >= 86)) {
		callback(new Error());
	} else {
		callback();
	}
}
const data = reactive({
	queryParams: {
		page: 1,
		rows: 10,
		structureType: undefined,
		destructionType: undefined,
		samplingPointName: undefined,
		sampleCode: undefined,
		createUserName: undefined,
	},
	form: {
		id: "",
		//地震事件id
		xsemId: "",
		//钢筋混凝土砌体房屋
		intact1: "",
		minor1: "",
		moderate1: "",
		serious1: "",
		destroy1: "",
		//工业厂房
		intact2: "",
		minor2: "",
		moderate2: "",
		serious2: "",
		destroy2: "",

		//城镇平房、农村房屋
		intact3: "",
		minor3: "",
		moderate3: "",
		serious3: "",
		destroy3: "",
		//钢结构
		intact4: "",
		minor4: "",
		moderate4: "",
		serious4: "",
		destroy4: "",
	},
	rules: {
		lossRatio1: [{
			required: true,
			message: errormessage2_10,
			trigger: "blur",
			validator: validator2_10
		}],
		lossRatio2: [{
			required: true,
			message: errormessage11_25,
			trigger: "blur",
			validator: validator11_25
		}],
		lossRatio3: [{
			required: true,
			message: errormessage26_60,
			trigger: "blur",
			validator: validator26_60
		}],
		lossRatio4: [{
			required: true,
			message: errormessage61_100,
			trigger: "blur",
			validator: validator61_100
		}],
		lossRatio5: [{
			required: true,
			message: errormessage91_100,
			trigger: "blur",
			validator: validator91_100
		}],
		lossRatio6: [{
			required: true,
			message: errormessage0_5,
			trigger: "blur",
			validator: validator0_5
		}],
		lossRatio7: [{
			required: true,
			message: errormessage6_19,
			trigger: "blur",
			validator: validator6_19
		}],
		lossRatio8: [{
			required: true,
			message: errormessage20_47,
			trigger: "blur",
			validator: validator20_47
		}],
		lossRatio9: [{
			required: true,
			message: errormessage48_100,
			trigger: "blur",
			validator: validator48_100
		}],
		lossRatio10: [{
			required: true,
			message: errormessage86_100,
			trigger: "blur",
			validator: validator86_100
		}],

	}
})
const { queryParams, form, rules } = toRefs(data)

function errormessage2_10() {
	proxy.$modal.msgWarning("请输入范围2~10之间的值");
}
function errormessage11_25() {
	proxy.$modal.msgWarning("请输入范围11~25之间的值");
}
function errormessage26_60() {
	proxy.$modal.msgWarning("请输入范围26~60之间的值");
}
function errormessage61_100() {
	proxy.$modal.msgWarning("请输入范围61~100之间的值");
}
function errormessage91_100() {
	proxy.$modal.msgWarning("请输入范围91~100之间的值");
}
function errormessage0_5() {
	proxy.$modal.msgWarning("请输入范围0~5之间的值");
}
function errormessage6_19() {
	proxy.$modal.msgWarning("请输入范围6~19之间的值");
}
function errormessage20_47() {
	proxy.$modal.msgWarning("请输入范围20~47之间的值");
}

function errormessage48_100() {
	proxy.$modal.msgWarning("请输入范围48~100之间的值");
}
function errormessage86_100() {
	proxy.$modal.msgWarning("请输入范围86~100之间的值");
}

/** 修改按钮操作 */
function handleUpdate() {
	updateLoss(form.value).then(res => {
		form.value = res.data;
		proxy.$modal.msgSuccess("修改成功");
		getList();
	})
}

/** 查询数据列表 */
function getList() {
	if (currentEvent.value) {
		getHouseFinishDlRatioByXsemId(currentEvent.value.id).then(res => {
			if (res.data) {
				form.value = res.data;
			} else {
				saveRadio()
			}
		})
	}
}

const saveRadio = () => {
	const data = {
		xsemId: currentEvent.value.id,
		lossRatio1: 6,
		lossRatio2: 18,
		lossRatio3: 43,
		lossRatio4: 81,
		lossRatio5: 96,
		lossRatio6: 3,
		lossRatio7: 11,
		lossRatio8: 31,
		lossRatio9: 73,
		lossRatio10: 91,
	}
	saveHouseFinishDlRatio(data).then(res => {
		if(res.code == 200 && res.message == '保存成功'){
			getList()
		}
	})
}

onMounted(() => {
	setTimeout(() => {
		getList();
	}, 200)
})

</script>

<style scoped lang="scss">
.title {
	margin: 0 0 20px !important;
}

table td {
	border: 1px solid #c6c6c6;
}

:deep(table .el-form-item--default) {
	margin-bottom: 0px !important;
}

:deep(.el-form-item__error) {
	display: none !important;
}

:deep(.el-input__inner) {
	text-align: center !important;
}
</style>

